<template>
  <Modal
      title="导入模板数据"
      v-model="visible"
      :append-to-body="true"
      :width="1000"
      id="import-template"
  >
    <Input type="textarea" v-model="editorJson"/>
    <span slot="footer">
          <Button @click="visible = false" icon="md-close">取消</Button>
          <Button type="primary" @click="handleImportJson" icon="md-checkmark">确定</Button>
        </span>
  </Modal>
</template>

<script>
export default {
  name: 'ImportTemplate',
  data() {
    return {
      visible: false,
      editorJson: '',
    };
  },

  components: {},

  methods: {
    init() {
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    handleImportJson() {
      if (!this.editorJson) {
        this.$Message.error({
          background: true,
          content: '模板数据不能为空',
          duration: this.$config.duration,
        });
        return;
      }

      try{
        const importData = JSON.parse(this.editorJson);
        if (importData) {
          this.$emit('import',importData);
        }
        this.$Message.success({
          background: true,
          content: '模板数据导入成功',
          duration: this.$config.duration,
        });
        this.visible=false;
      }catch (e){
        this.$Message.error({
          background: true,
          content: '模板数据无法正确解析，请检查',
          duration: this.$config.duration,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
#import-template::v-deep textarea{
  height:442px;
}
#import-template::v-deep textarea::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
}

#import-template::v-deep textarea::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  background-color: #e8eaec;
}

#import-template::v-deep textarea::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  border-radius: 2px;
  background-color: #fff;
}
</style>
